<template>
  <div @click="onClick">
    <component
      :is="config.component"
      v-if="config.component.startsWith('SVG')"
      :id="config.id"
      ref="component"
      :class="setCommonClass()"
      :style="getSVGStyle(config.style, config.styleFilter)"
      :prop-value="aliasPropValue"
      :element="config"
      :request="config.request"
      :linkage="config.linkage"
      :remote-data="remoteData"
      @generalEvent="generalEvent"
    />
    <component
      :is="config.component"
      v-else
      :id="config.id"
      ref="component"
      :class="setCommonClass()"
      :style="getStyle(config.style, config.styleFilter)"
      :prop-value="aliasPropValue"
      :element="config"
      :request="config.request"
      :linkage="config.linkage"
      :remote-data="remoteData"
      @generalEvent="generalEvent"
    />
  </div>
</template>

<script setup lang="ts">
import { eventBus, getStyle, getSVGStyle, initializeMapping, isEmpty } from "../utils";
import useEvents from "../utils/useEvents";
import { watch, onMounted, ref, nextTick } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({
  config: {
    type: Object,
    required: true,
    default: () => {}
  },
  remoteData: {
    type: Object,
    required: true,
    default: () => {}
  }
});

const component = ref(null);
const aliasPropValue = ref({});
let eventParams = {};

let { offEvent, showCondition } = useEvents({
  curComp: component,
  curConfig: props.config
});

if (!isEmpty(props.remoteData)) {
  const updateRemoteData = initializeMapping(props.remoteData, aliasPropValue.value, props.config?.dataAliase, props.config.propValue);
  watch(
    () => props.remoteData,
    () => {
      nextTick(() => {
        updateRemoteData();
      });
    },
    { deep: true, immediate: true }
  );
} else {
  aliasPropValue.value = props.config.propValue;
}
onMounted(() => {
  //event数据整理为{eventName: {key: value}}形式
  eventParams = props.config.events?.reduce((a, c) => {
    const { event, params } = c;
    a[event] = params.reduce((acc, cur) => {
      acc[cur.key] = cur.value;
      return acc;
    }, {});
    return a;
  }, {});
  //如果是筛选组件则解绑自己
  // const excludeComp = ["filterMenu", "LayerFilter"];
  // if (excludeComp.includes(props.config.component) || eventParams["compFilter"]) {
  //   offEvent("compFilter");
  // }
});
function setCommonClass() {
  let common = {};
  if (props.config.belong !== "right") {
    common["component"] = true;
  }
  if (["widgetVertical", "right"].indexOf(props.config.belong) !== -1) {
    common["bgtransparent"] = true;
  }
  return common;
}
function onClick(e) {
  e.stopPropagation();
  e.preventDefault();
  if (props.config?.classConfig) {
    const { routerPath, isClassJump } = props.config?.classConfig;
    if (isClassJump && routerPath) {
      router.push({
        path: routerPath
      });
    }
  }
}

function generalEvent(params) {
  // console.log("generalEvent", params);
  //eventParams传递的是激发事件组件event参数，如果是事件的接收方处理相应参数一般在通用参数里配置，这里是不是需要增加一个统一的事件管理
  const { type, compEmitData } = params;
  let coParams = eventParams[type] ? { ...eventParams[type], compEmitData } : { compEmitData };
  eventBus.emit(type, { emitParams: coParams, emitConfig: props.config });
}
</script>

<style lang="scss" scoped>
.component {
  position: absolute;
}

.bgtransparent {
  background-color: transparent;
}
</style>
